<template>
    <view class="comment-item">
        <view class="comment-item-header">
            <image class="user-info-avatar" mode="aspectFill" :src="easyGetUserImgUrl(item.UserFace)"></image>
            <view class="comment-item-header-right">
                <view class="comment-user-info">
                    <text class="user-info-name">{{ item.NickName }}</text>
                    <view class="vip-lv-box" v-if="false">
                        <image class="vip-lv-img" src="/static/img/vip_1.png"></image>
                        <text class="text">PLUS年卡</text>
                        <view class="vip-bg"></view>
                    </view>
                </view>
                <text class="comment-add-time">{{ item.AddTime }}</text>
            </view>
        </view>
        <comment-star :star="item.Star"></comment-star>
        <view class="comment-msg">
            <text :class="{ 'none-text': !item.Msg }">{{ item.Msg ? item.Msg : "无内容" }}</text>
        </view>
        <view class="comment-pic">
            <image
                class="comment-pic-img"
                mode="aspectFill"
                v-for="(img, imgIndex) in easyImgList(item.Images)"
                :key="imgIndex"
                :src="img"
                @tap="previewImage(imgIndex)"></image>
        </view>
        <view class="reply" v-if="showReply && item.ReplyMsg">
            <text class="reply-time" v-if="false"></text>
            <view class="reply-mark"></view>
            <text class="reply-msg">商家回复：{{ item.ReplyMsg }}</text>
        </view>
    </view>
</template>
<script>
import commentStar from "@/uni-sub-base/components/comment/comment-star.vue"
export default {
    components: {
        commentStar,
    },
    props: {
        item: {
            type: Object,
            default: () => {},
        },
        showReply: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {}
    },
    mounted() {},
    methods: {
        //预览图片
        previewImage(current) {
            uni.previewImage({
                current: current,
                urls: this.easyImgList(this.item.Images),
            })
        },
    },
}
</script>

<style lang="scss">
.comment-item {
    display: flex;
    flex-direction: column;
    padding: $app-page-padding;
    background: $color-white;
    margin-bottom: 12rpx;

    .comment-item-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: $app-page-padding;

        .user-info-avatar {
            width: 72rpx;
            height: 72rpx;
            border-radius: 100rpx;
            margin-right: $app-page-padding;
        }

        .comment-item-header-right {
            display: flex;
            flex-direction: column;
            flex: 1;

            .comment-user-info {
                display: flex;
                flex-direction: row;
                align-items: center;

                .user-info-name {
                    font-size: $font-size-24;
                    color: $color-black;
                    margin-right: 16rpx;
                }
            }

            .comment-add-time {
                margin-top: 10rpx;
                color: $app-color-text-tip;
            }
        }
    }

    .comment-msg {
        display: flex;
        margin-bottom: $app-page-padding;
    }

    .comment-pic {
        .comment-pic-img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 8rpx;
            margin-right: 20rpx;
        }
    }

    .reply {
        position: relative;
        padding-top: 20rpx;
        margin-top: 8rpx;
        .reply-mark {
            display: flex;
            position: absolute;
            top: 0;
            left: 3.67vw;
            content: "";
            width: 0;
            height: 0;
            border-bottom: 0.6rem solid #f5f6f8;
            border-right: 0.6rem solid transparent;
            border-top: 0.1rem solid transparent;
            border-left: 0.6rem solid transparent;
        }

        text {
            display: flex;
            background: #f5f6f8;
            padding: $app-page-padding;
            border-radius: 8rpx;
        }
    }
}
.none-text {
    color: $app-color-text-tip;
}
</style>
